/* Start Loader /// ---------------------------- */

/* ===== GLOBAL LOADER WRAPPER ===== */

.custom-slider-container {
    width: 100%;
    overflow: hidden;
}

.custom-loader-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: var(--Blue-color);
    z-index: 9999;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    transition: opacity 1.2s ease, transform 1s ease;
}

    .custom-loader-overlay.fade-out {
        opacity: 0;
        transform: scale(0.9);
        pointer-events: none;
    }

/* ===== SPINNER ===== */
.custom-spinner-box {
    position: relative;
    width: 160px;
    height: 160px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.custom-circle-static {
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 30%;
    background: var(--Blue-color);
    z-index: 1;
}

.custom-circle-border {
    position: absolute;
    width: 100%;
    height: 100%;
    padding: 10px;
    border-radius: 49%;
    background: conic-gradient(var(--white-color) 25%, var(--secBule) 100%);
    animation: custom-spin 2.5s linear infinite;
    z-index: 2;
}

.custom-circle-core {
    position: relative;
    width: 96%;
    height: 96%;
    background-color: var(--Blue-color);
    border-radius: 50%;
    z-index: 3;
}

@keyframes custom-spin {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

/* ===== LOADING TEXT ===== */
.custom-loading06 {
    display: flex;
    gap: 0.2rem;
    margin-top: 30px;
    flex-wrap: wrap;
    justify-content: center;
    padding: 0 10px;
    max-width: 90%;
}

    .custom-loading06 span {
        position: relative;
        color: rgba(255, 255, 255, 0.2);
        font-size: 3.5rem;
        font-weight: bold;
        text-transform: uppercase;
    }

        .custom-loading06 span::after {
            content: attr(data-text);
            position: absolute;
            top: 0;
            left: 0;
            color: #fff;
            opacity: 0;
            transform: rotateY(-90deg);
            animation: custom-loading06 6s infinite;
        }

        /* Adjust delays for 14 letters */
        .custom-loading06 span:nth-child(1)::after {
            animation-delay: 0.3s;
        }

        .custom-loading06 span:nth-child(2)::after {
            animation-delay: 0.6s;
        }

        .custom-loading06 span:nth-child(3)::after {
            animation-delay: 0.9s;
        }

        .custom-loading06 span:nth-child(4)::after {
            animation-delay: 1.2s;
        }


@keyframes custom-loading06 {

    0%, 80%, 100% {
        transform: rotateY(-90deg);
        opacity: 0;
    }

    30%, 50% {
        transform: rotateY(0);
        opacity: 1;
    }
}

/* End Loader /// ---------------------------- */



/********************New Section*******************/
.span_12 {
    max-width: 1400px;
    margin: auto;
}

.col-sm-4 {
    /* width: 31.914893614%; */
    float: left;
    position: relative;
    min-height: 1px;
    /* margin-left: 1%; */
    box-sizing: border-box;
}

.custom-flip-box {
    transform-style: preserve-3d;
    -webkit-transform-style: preserve-3d;
    perspective: 1000px;
    -webkit-perspective: 1000px;
}

    .custom-flip-box .flip-box-front[data-text-color="light"],
    .custom-flip-box .flip-box-back[data-text-color="light"],
    .custom-flip-box .flip-box-front[data-text-color="light"] h1,
    .custom-flip-box .flip-box-back[data-text-color="light"] h1,
    .custom-flip-box .flip-box-front[data-text-color="light"] h2,
    .custom-flip-box .flip-box-back[data-text-color="light"] h2,
    .custom-flip-box .flip-box-front[data-text-color="light"] h3,
    .custom-flip-box .flip-box-back[data-text-color="light"] h3,
    .custom-flip-box .flip-box-front[data-text-color="light"] h4,
    .custom-flip-box .flip-box-back[data-text-color="light"] h4,
    .custom-flip-box .flip-box-front[data-text-color="light"] h5,
    .custom-flip-box .flip-box-back[data-text-color="light"] h5,
    .custom-flip-box .flip-box-front[data-text-color="light"] h6,
    .custom-flip-box .flip-box-back[data-text-color="light"] h6 {
        color: #fff;
    }

    .custom-flip-box .flip-box-front,
    .custom-flip-box .flip-box-back {
        background-size: cover;
        background-position: center;
        transition: -webkit-transform 0.75s cubic-bezier(.45, .2, .2, 1);
        transition: transform 0.75s cubic-bezier(.45, .2, .2, 1);
        transition: transform 0.75s cubic-bezier(.45, .2, .2, 1), -webkit-transform 0.75s cubic-bezier(.45, .2, .2, 1);
        -webkit-transition: transform 0.75s cubic-bezier(.45, .2, .2, 1);
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
        -webkit-perspective: inherit;
        perspective: inherit;
    }

    .custom-flip-box[data-shadow="light_visibility"] .flip-box-back,
    .custom-flip-box[data-shadow="light_visibility"] .flip-box-front {
        box-shadow: 0px 30px 60px rgba(0, 0, 0, 0.2);
    }

    .custom-flip-box[data-shadow="heavy_visibility"] .flip-box-back,
    .custom-flip-box[data-shadow="heavy_visibility"] .flip-box-front {
        box-shadow: 0px 30px 75px rgba(0, 0, 0, 0.4);
    }

    .custom-flip-box .flip-box-back[data-bg-overlay="true"]:after,
    .custom-flip-box .flip-box-front[data-bg-overlay="true"]:after {
        position: absolute;
        z-index: 1;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        content: ' ';
        display: block;
        opacity: 0.6;
        background-color: inherit;
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
    }

    .custom-flip-box:hover .flip-box-front,
    .custom-flip-box:hover .flip-box-back {
        transition: -webkit-transform 0.75s cubic-bezier(.45, .2, .2, 1);
        transition: transform 0.75s cubic-bezier(.45, .2, .2, 1);
        transition: transform 0.75s cubic-bezier(.45, .2, .2, 1), -webkit-transform 0.75s cubic-bezier(.45, .2, .2, 1);
        -webkit-transition: transform 0.75s cubic-bezier(.45, .2, .2, 1);
    }

    .custom-flip-box .flip-box-back {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        background-color: var(--Blue-color);
    }

    .custom-flip-box .oranges-button {
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
    }

    .custom-flip-box[data-h_text_align="center"] .flip-box-back,
    .custom-flip-box[data-h_text_align="center"] .flip-box-front {
        text-align: center;
    }

    .custom-flip-box[data-h_text_align="right"] .flip-box-back,
    .custom-flip-box[data-h_text_align="right"] .flip-box-front {
        text-align: right;
    }

    .custom-flip-box[data-v_text_align="center"] .flip-box-back .inner,
    .custom-flip-box[data-v_text_align="center"] .flip-box-front .inner {
        transform: translateY(-50%) translateZ(60px) scale(.88);
        -webkit-transform: translateY(-50%) translateZ(60px) scale(.88);
        -ms-transform: translateY(-50%) translateZ(60px) scale(.88);
        top: 50%;
    }

    .custom-flip-box[data-v_text_align="bottom"] .flip-box-back .inner,
    .custom-flip-box[data-v_text_align="bottom"] .flip-box-front .inner {
        -ms-transform: translateZ(60px) scale(.88);
        transform: translateZ(60px) scale(.88);
        -webkit-transform: translateZ(60px) scale(.88);
        bottom: 0;
    }

    .custom-flip-box[data-v_text_align="top"] .flip-box-back .inner,
    .custom-flip-box[data-v_text_align="top"] .flip-box-front .inner {
        -ms-transform: translateZ(60px) scale(.88);
        transform: translateZ(60px) scale(.88);
        -webkit-transform: translateZ(60px) scale(.88);
        top: 0;
    }

    .custom-flip-box[data-flip-direction="vertical-to-top"] .flip-box-back .inner,
    .custom-flip-box[data-flip-direction="vertical-to-top"] .flip-box-front .inner,
    .custom-flip-box[data-flip-direction="vertical-to-bottom"] .flip-box-back .inner,
    .custom-flip-box[data-flip-direction="vertical-to-bottom"] .flip-box-front .inner {
        -ms-transform: translateZ(50px) scale(.9);
        transform: translateZ(50px) scale(.9);
        -webkit-transform: translateZ(50px) scale(.9);
    }

    .custom-flip-box[data-v_text_align="center"][data-flip-direction="vertical-to-bottom"] .flip-box-back .inner,
    .custom-flip-box[data-v_text_align="center"][data-flip-direction="vertical-to-bottom"] .flip-box-front .inner,
    .custom-flip-box[data-v_text_align="center"][data-flip-direction="vertical-to-top"] .flip-box-back .inner,
    .custom-flip-box[data-v_text_align="center"][data-flip-direction="vertical-to-top"] .flip-box-front .inner {
        -ms-transform: translateY(-50%) translateZ(50px) scale(.9);
        transform: translateY(-50%) translateZ(50px) scale(.9);
        -webkit-transform: translateY(-50%) translateZ(50px) scale(.9);
    }

    .custom-flip-box .flip-box-back .inner,
    .custom-flip-box .flip-box-front .inner {
        position: absolute;
        left: 0;
        width: 100%;
        padding: 60px;
        outline: 1px solid transparent;
        -webkit-perspective: inherit;
        perspective: inherit;
        z-index: 2;
        text-align: center;
        color: white;
    }

    .custom-flip-box[data-flip-direction="horizontal-to-left"] .flip-box-back,
    body:not(.using-mobile-browser) .custom-flip-box[data-flip-direction="horizontal-to-right"]:hover .flip-box-front,
    .owl-carousel.moving .custom-flip-box[data-flip-direction="horizontal-to-left"] .flip-box-back {
        -ms-transform: rotateY(180deg);
        -webkit-transform: rotateY(180deg);
        transform: rotateY(180deg);
        -webkit-transform-style: preserve-3d;
        transform-style: preserve-3d;
    }

    .custom-flip-box[data-flip-direction="horizontal-to-right"].flipped .flip-box-front {
        -ms-transform: rotateY(180deg) !important;
        -webkit-transform: rotateY(180deg) !important;
        transform: rotateY(180deg) !important;
    }

    .custom-flip-box[data-flip-direction="horizontal-to-left"] .flip-box-front,
    body:not(.using-mobile-browser) .custom-flip-box[data-flip-direction="horizontal-to-left"]:hover .flip-box-back,
    .custom-flip-box[data-flip-direction="horizontal-to-right"] .flip-box-front,
    body:not(.using-mobile-browser) .custom-flip-box[data-flip-direction="horizontal-to-right"]:hover .flip-box-back,
    .owl-carousel.moving .custom-flip-box[data-flip-direction="horizontal-to-left"] .flip-box-front,
    .owl-carousel.moving .custom-flip-box[data-flip-direction="horizontal-to-right"] .flip-box-front {
        -ms-transform: rotateY(0deg);
        -webkit-transform: rotateY(0deg);
        transform: rotateY(0deg);
        -webkit-transform-style: preserve-3d;
        transform-style: preserve-3d;
    }

    .custom-flip-box[data-flip-direction="horizontal-to-left"].flipped .flip-box-back,
    .custom-flip-box[data-flip-direction="horizontal-to-right"].flipped .flip-box-back {
        -ms-transform: rotateY(0deg) !important;
        -webkit-transform: rotateY(0deg) !important;
        transform: rotateY(0deg) !important;
    }

    body:not(.using-mobile-browser) .custom-flip-box[data-flip-direction="horizontal-to-left"]:hover .flip-box-front,
    .custom-flip-box[data-flip-direction="horizontal-to-right"] .flip-box-back,
    .owl-carousel.moving .custom-flip-box[data-flip-direction="horizontal-to-right"] .flip-box-back {
        -ms-transform: rotateY(-180deg);
        -webkit-transform: rotateY(-180deg);
        transform: rotateY(-180deg);
        -webkit-transform-style: preserve-3d;
        transform-style: preserve-3d;
    }

    .custom-flip-box[data-flip-direction="horizontal-to-left"].flipped .flip-box-front {
        -ms-transform: rotateY(-180deg) !important;
        -webkit-transform: rotateY(-180deg) !important;
        transform: rotateY(-180deg) !important;
    }

    .custom-flip-box[data-flip-direction="vertical-to-top"] .flip-box-back,
    body:not(.using-mobile-browser) .custom-flip-box[data-flip-direction="vertical-to-bottom"]:hover .flip-box-front {
        -ms-transform: rotateX(180deg);
        -webkit-transform: rotateX(180deg);
        transform: rotateX(180deg);
        -webkit-transform-style: preserve-3d;
        transform-style: preserve-3d;
    }

    .custom-flip-box[data-flip-direction="vertical-to-bottom"].flipped .flip-box-front {
        -ms-transform: rotateX(180deg) !important;
        -webkit-transform: rotateX(180deg) !important;
        transform: rotateX(180deg) !important;
    }

    .custom-flip-box[data-flip-direction="vertical-to-top"] .flip-box-front,
    body:not(.using-mobile-browser) .custom-flip-box[data-flip-direction="vertical-to-top"]:hover .flip-box-back,
    .custom-flip-box[data-flip-direction="vertical-to-bottom"] .flip-box-front,
    body:not(.using-mobile-browser) .custom-flip-box[data-flip-direction="vertical-to-bottom"]:hover .flip-box-back {
        -ms-transform: rotateX(0deg);
        -webkit-transform: rotateX(0deg);
        transform: rotateX(0deg);
        -webkit-transform-style: preserve-3d;
        transform-style: preserve-3d;
    }

    .custom-flip-box[data-flip-direction="vertical-to-top"].flipped .flip-box-back,
    .custom-flip-box[data-flip-direction="vertical-to-bottom"].flipped .flip-box-back {
        -ms-transform: rotateX(0deg) !important;
        -webkit-transform: rotateX(0deg) !important;
        transform: rotateX(0deg) !important;
    }

    body:not(.using-mobile-browser) .custom-flip-box[data-flip-direction="vertical-to-top"]:hover .flip-box-front,
    .custom-flip-box[data-flip-direction="vertical-to-bottom"] .flip-box-back {
        -ms-transform: rotateX(-180deg);
        -webkit-transform: rotateX(-180deg);
        transform: rotateX(-180deg);
        -webkit-transform-style: preserve-3d;
        transform-style: preserve-3d;
    }

    .custom-flip-box[data-flip-direction="vertical-to-top"].flipped .flip-box-front {
        -ms-transform: rotateX(-180deg) !important;
        -webkit-transform: rotateX(-180deg) !important;
        transform: rotateX(-180deg) !important;
    }

    .custom-flip-box .flip-box-front i {
        margin-bottom: 20px;
        height: auto !important;
        display: block;
        width: auto !important;
    }

    .custom-flip-box .flip-box-front .inner {
        position: absolute;
        left: 0;
        width: 100%;
        text-align: center;
        outline: 1px solid transparent;
        -webkit-perspective: inherit;
        perspective: inherit;
        z-index: 2;
        font-size: 30px;
        font-weight: 900;
        color: white;
    }

    .custom-flip-box .flip-box-back .inner,
    .custom-flip-box .flip-box-front .inner {
        position: absolute;
        left: 0;
        width: 100%;
        padding: 60px 0px;
        outline: 1px solid transparent;
        -webkit-perspective: inherit;
        perspective: inherit;
        z-index: 2;
    }

.slider-arrows button {
    background-color: var(--Blue-color);
    color: white;
    border: none;
    padding: 8px 16px;
    margin-left: 5px;
    font-size: 18px;
    cursor: pointer;
    border-radius: 10px;
    transition: all 0.3s;
}

    .slider-arrows button:hover {
        background-color: var(--secBule);
    }


.custom-slider-container .owl-carousel {
    display: flex;
    flex-wrap: wrap;
}

.item {
    display: block;
    transition: transform 0.25s ease;
    flex: 1 0 30%;
    max-width: 31%;
    margin-left: 1%;
    min-width: 100%;
}

.custom-flip-box {
    height: 400px;
}

.flip-box-front,
.flip-box-back {
    min-height: 400px;
    max-height: 400px;
}

.custom-slider-container .view-details-button {
    display: inline-block;
    padding: 10px 20px;
    background-color: var(--Blue-color);
    color: white;
    border: 2px solid white;
    border-radius: 20px;
    text-decoration: none;
    font-weight: bold;
    transition: background-color 0.3s ease;
}

    .custom-slider-container .view-details-button:hover {
        background-color: var(--secBule);
        color: white;
        border: 2px solid white;
    }

.flip-box-front {
    position: relative;
    background-size: cover;
    background-position: center;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    overflow: hidden;
}

    .flip-box-front .content {
        position: relative;
        padding: 20px;
        z-index: 2;
    }

        .flip-box-front .content a {
            color: #fff;
            text-decoration: none;
        }

    /* Overlay تدريجي من الأسفل للأعلى */
    .flip-box-front::after {
        content: "";
        position: absolute;
        bottom: 0;
        left: 0;
        height: 60%;
        width: 100%;
        background: linear-gradient(to top, #0f2540 10%, #0f2540d7 20%, transparent 50%);
        z-index: 1;
    }

    /* تنسيق عنوان المحتوى */
    .flip-box-front .content_title {
        font-size: 20px;
        font-weight: bold;
        margin: 0;
    }